<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .item {
            color: red;
        }
    </style>
</head>
<body>
<!--创建视图-->
<div id="view">
    <!--{{key}}-->
    {{message}}
    <span v-text="message"></span>
    <!--v-html / v-text-->
    <span v-html="a"></span>
    <!--v-once 代表只会取一次值，后面值发生改变，视图不做修改-->
    <span v-once>{{message}}</span>
    <!--v-bind:属性名 可以动态绑定属性值 v-bind 可以省略 :属性名绑定属性值-->
    <span v-bind:class="className">今天星期四</span><br/>
    <span :class="className">今天星期四</span>
    <span v-bind:style="style">疯狂星期四</span>
    <!--[]动态属性名-->
    <a :[attr]="url ? url : 'https://www.baidu.com'">点击一下</a>
    <!--v-if/v-else/v-else-if 只要有一个为true剩下的不会加载-->
    <span id="num1" v-if="num % 3 == 0">num是3的倍数</span>
    <span id="num2" v-else-if="num% 2 == 0">num是2的倍数</span>
    <span id="num3" v-else>num不是3的倍数也不是2的倍数</span>
    <!--v-show 不管是 true 还是 false html元素在，切换的是display属性 false-display:none;-->
    <span v-show="num % 4 == 0">num是4的倍数</span>
    <!--v-for 列表渲染  n in arr  arr-渲染的数组  n-数组中每个元素的别名-->
    <div v-for="n in arr">
        {{n}}
    </div>

    <table>
        <tr>
            <td>索引</td>
            <td>id</td>
            <td>name</td>
            <td>price</td>
        </tr>
        <tr v-for="(item, index) in goodsList">
            <td>{{index + 1}}</td>
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.price}}</td>
        </tr>
    </table>
    <!--onclick -->
    <!--v-on:click 绑定事件 v-on: -@-->
    <!--@click  @dbclick @blur @foucs @mouseover @mouseout-->
    <button v-on:click="change()">{{count}}</button>
    <button @click="change()">{{count}}</button>
    <button @click="change()">{{count}}</button>

</div>
<!--引入资源-->
<script src="./js/vue.js"></script>
<script>
    // 3. 创建ViewModel
    const vm = Vue.createApp({
        data() {
            // model 数据
            return {
                // key : value
                message: 'hello',
                age: 20,
                arr: [1, 2, 3, 0, 4, 5],
                student: {
                    name: 'zs',
                    age: 22,
                    gender: "男"
                },
                other: undefined,
                a: '<a href="https://www.baidu.com/">点一下有惊喜</a>',
                className: 'item',
                style: 'font-size:30px;color:red;',
                attr: null,
                url: undefined,
                num: 4,
                goodsList: [
                    {id: 1, name: '鼠标', price: 23},
                    {id: 2, name: '键盘', price: 233},
                    {id: 3, name: '显卡', price: 2333},
                    {id: 4, name: '内存', price: 223},
                ],
                count:0
            }
        },
        methods: {
            // 声明方法
            hi() {
                console.log("hi")
            },
            getGoodsList() {

            },
            change() {
                this.count ++
            }

        }
    }).mount("#view")

    vm.hi()
</script>
</body>
</html>